<template>
	<view class="snapshot">
		<productSSwiper :imgUrls="orderInfo.cartInfo[0].productInfo.slider_image"></productSSwiper>
		
		<view class="spu-wapper">
			
			<view class="zhima-credit">
				<view class="content">
					<image class="zhima-icon" src="../../static/images/zhima-icon.png"></image>
					<text class="left-title">芝麻免押 ·</text><text>600分以上有机会免押金</text>
				</view>
			</view>
			
			
			<view class="introduce acea-row row-between">
				<view>
					<span v-if="orderInfo.cartInfo[0].productInfo.dis_old == 100" class="labelNew">全新</span>
					<span v-else class="labelNew">{{orderInfo.cartInfo[0].productInfo.dis_old}}新</span>
					<span>{{orderInfo.cartInfo[0].productInfo.store_name}}</span>
				</view>
			</view>
			
		
			<view class="spu-label">
				<span class="label-item" v-for="(item, index) in orderInfo.cartInfo[0].productInfo.store_label">{{item.label_name}}</span>
			</view>
			
			<view class="rent-wrapper acea-row row-between">
				<view class="left">
					<view class="rent-label">
						<image class="zhima-icon" src="../../static/images/zhima-icon.png"></image>
						信用免押
					</view>
					<view class="spu-rent">
						商品押金<text class="price">¥0</text>
					</view>
				</view>
				
				<view></view>
				
			</view>
			<view class="snapshap-tip">
				当前页面内容为订单快照，包含订单创建是的商品描述和下单信息，买卖双方和平台在发生交易争议时，该页面作为判定依据。
			</view>
		</view>
		
		<view class="anxinzu-wrapper">
			<image class="anxinzu-img" src="../goods_details/static/anxinzu.png"></image>
				
			<view class="list">
				<view class="item">
					<view class="img">
						<image src="../../static/images/icon-axz01.png"></image>
					</view>
					<view class="content">100%正品</view>
				</view>
				<view class="item">
					<view class="img">
							<image src="../../static/images/icon-axz01.png"></image>
					</view>
					<view class="content">假一赔三</view>
				</view>
				<view class="item">
					<view class="img">
							<image src="../../static/images/icon-axz01.png"></image>
					</view>
					<view class="content">原厂原装</view>
				</view>
				<view class="item">
					<view class="img">
							<image src="../../static/images/icon-axz01.png"></image>
					</view>
					<view class="content">联保保障</view>
				</view>
			</view>
			
			<view class="anxinzu-text">正品保障·原厂原装·拒绝仿冒</view>
			
			<image class="label-icon" src="../goods_details/static/label_icon.png"></image>
		</view>
		
		<view class="sku-wrapper" v-if="orderInfo">
			<view class="item">
				<view class="left">已选规格</view>
				<view class="right">{{orderInfo.bill.lease_way}}{{orderInfo.cartInfo[0].attrInfo.suk}}</view>
			</view>
			
			<view class="item">
				<view class="left">商品租期</view>
				<view class="right">
					<view>{{orderInfo.bill.total_day}}天</view>
					<view>{{orderInfo.lease_term.start_date}}~{{orderInfo.lease_term.end_date}}</view>
				</view>
			</view>
			
			<view class="item">
				<view class="left">总租金</view>
				<view class="right">{{orderInfo.rent_price}}</view>
			</view>
			
			<view class="item" @click="goRentList">
				<view class="left">买断价</view>
				<view class="right app-font-color">查看买断价格 ></view>
			</view>
			
			<view class="item">
				<view class="left">快照时间</view>
				<view class="right">{{orderInfo.add_time_y}} {{orderInfo.add_time_h}}</view>
			</view>
		</view>
		
		<view id="past1" style="margin-top: 20rpx;" >
			<view class="title-selsct-wrapper"  :class="headerShow? 'top-header' : ''">
				<view >
					<view class="title-wrapper">
						<view class="detail-title" :class="selectIndex == 0 ? 'on': ''" @click="selectTab(0)">
							<view class="content"  :class="selectIndex == 0 ? 'on detail-tab-b-b': ''">商品详情</view>
							<!-- <view class="h-line" :class="selectIndex == 0 ? 'on': ''"></view> -->
						</view>
						<view class="detail-title" :class="selectIndex == 1 ? 'on': ''" @click="selectTab(1)">
							<view class="content"  :class="selectIndex == 1 ? 'on detail-tab-b-b': ''">租赁说明</view>
							<!-- <view class="h-line" :class="selectIndex == 1 ? 'on': ''"></view> -->
						</view>
						<view class="detail-title" :class="selectIndex == 2 ? 'on': ''" @click="selectTab(2)"  >
							<view class="content"  :class="selectIndex == 2 ? 'on detail-tab-b-b': ''">常见问题</view>
							<!-- <view class="h-line" :class="selectIndex == 2 ? 'on': ''"></view> -->
						</view>
					</view>
					
					<!-- <view class="spu-detail-select" v-if="selectIndex == 0">
						<view class="item">
							<view class="select-title on">商品介绍</view>
						</view>
						<view class="item">
							<view class="select-title">服务标准</view>
						</view>
						<view class="item">
							<view class="select-title">隐私保障</view>
						</view>
					</view> -->
					
				<!-- 	<view class="spu-detail-select" v-if="selectIndex == 1">
						<view class="item">
							<view class="select-title on">租赁流程</view>
						</view>
						<view class="item">
							<view class="select-title">租赁须知</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		
		<view class="product-intro" style="padding-bottom: 10rpx;" >
			
			<view v-if="headerShow" style="height: 98rpx;"></view>
			
			<view>
				<view class="conter" v-if="selectIndex == 0">
					
					<jyf-parser :html="description" ref="article" :tag-style="tagStyle">
					</jyf-parser>
					
					
					<u-divider :dashed="true"></u-divider>
					
					<view>
						<view class="s-item">
							<view class="flow-title">
								<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
								<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
								<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
								<view class="title-text">商品详情-服务标准</view>
							</view>
							<view class="content">
								租赁服务设备及租赁服务的定义</br>
								手机为非监管机，用户自由定义使用，需按期还款。</br>
								租赁服务设备系指商户通过合法渠道采购，并将租赁服务设备转让给您使用(设备所有权归属商户)，同时向您提供相关服务。租赁期间，您在支付相应租金后享有租赁服务设备的使用权，若您未按时支付租金则无法享有租赁服务设备的使用权，平台商户有权停止向您提供租赁服务并停用租赁服务设备。</br>
								在订单交易成功后，您可以享受以下租赁服务内容:</br>
								(1)租赁服务设备使用权;</br>
								(2)顺丰寄出包邮服务;</br>
								(3) 极速发货服务:订单审核通过后约24小时发货(节假日顺延，如遇订单缺货，会提前与您沟通协商);</br>
								(4)随租随还服务:随租随还套餐单在满足随租随还，条件后，您可在当期租期内提前归还设备，无需支付违约金，当期剩余租金不退;</br>
								(5) 租中担保服务:如在租赁期间租赁服务设备损坏在设备损坏后平台判定损坏责任归属前，平台为您提供设备质量担保服务，您无需向商家支付任何费用(设备损坏前已产生的费用除外)</br>
							</view>
						</view>
						<view class="s-item">
							<view class="flow-title">
								<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
								<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
								<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
								<view class="title-text">隐私保障</view>
							</view>
							<view class="content">
								关于您隐私保障服务说明</br>
								关于您隐私保障服务说明我们深知个人信息对您的重要性，我们非常重视您的隐私和个人信息保护。为此，我们通过采取安全技术措施、制定内部管理制度和操作规则、加强人员管理和教育培训等有效措施来保障您在使用平台的产品/服务时的隐私与个人信息安全。平台为保障您的个人信息所采取的部分保护措施如下:</br>
								(一)针对交易信息、用户注册信息等记录在系统的信息</br>
								我们将通过《个人信息保护政策》 (隐私政策)向您说明在您使用平台的产品/服务时，我们会如何收集、存储、保护、使用及对外提供您的个人信息，以及我们为您提供的访问、更新、删除和保护这些信息的方式。您可通过查阅该政策了解相关信息。</br>
								此外，如我们在为您提供服务的过程中需要收集/使用隐私政策中未列明的您的个人信息(例如您的身份证件照片等)，我们将在另行取得您的同意后才会收集/使用。如您不同意向我们提供此类信息，可直接拒绝，您拒绝提供此类信息并不会影响您正常使用小程序、APP的基本功能。</br>
								(二)针对租赁服务设备中的信息</br>
								(1)租赁结束后归还的设备:如租赁设备归还地址为平台所在地，我们将在收到设备后在录音录像环境中对设备中的数据进行全面清除并恢复至出厂状态后，才会进行下一轮租赁;如设备归还地址为商家所在地，我们个督促并要求商家在录音录像环境中对设备中的数据进行关于您隐私保障服务说明</br>
								关于您隐私保障服务说明我们深知个人信息对您的重要性，我们非常重视您的隐私和个人信息保护。为此，我们通过采取安全技术措施、制定内部管理制度和操作规则、加强人员管理和教育培训等有效措施来保障您在使用平台的产品/服务时的隐私与个人信息安全。平台为保障您的个人信息所采取的部分保护措施如下:</br>
								(一)针对交易信息、用户注册信息等记录在系统的信息</br>
								我们将通过《个人信息保护政策》 (隐私政策)向您说明在您使用平台的产品/服务时，我们会如何收集、存储、保护、使用及对外提供您的个人信息，以及我们为您提供的访问、更新、删除和保护这些信息的方式。您可通过查阅该政策了解相关信息。</br>
								此外，如我们在为您提供服务的过程中需要收集/使用隐私政策中未列明的您的个人信息(例如您的身份证件照片等)，我们将在另行取得您的同意后才会收集/使用。如您不同意向我们提供此类信息，可直接拒绝，您拒绝提供此类信息并不会影响您正常使用小程序、APP的基本功能。</br>
								(二)针对租赁服务设备中的信息</br>
								(1)租赁结束后归还的设备:如租赁设备归还地址为平台所在地，我们将在收到设备后在录音录像环境中对设备中的数据进行全面清除并恢复至出厂状态后，才会进行下一轮租赁;如设备归还地址为商家所在地，我们个督促并要求商家在录音录像环境中对设备中的数据进行</br>
							</view>
						</view>
						
						<view class="s-item">
							<view class="flow-title">
								<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
								<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
								<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
								<view class="title-text">关于拒签</view>
							</view>
							<view class="content">起租日前到货的订单用户签收时，发现商品存在质量问题、商品与订单规格描述或商家约定的描述不一致可拒签快递，可联系商家客服申请换货或申请退款，并由商家承担往返运费；因用户自身原因拒签的，用户需自行承担往返运费；起租日后到货的订单用户签收时，用户可以拒签快递，由商家承担往返运费；
							</view>
							<view class="content"><text style="font-weight: bold;">温馨提醒：</text>若商品出现以下情形不支持拒签，用户需与商家协商处理：（1）全新商品被拆封或激活或其他行为影响商品二次出售的；（2）定制产品。</view>
						</view>
					</view>
					
				</view>
				
				
				<view v-if="selectIndex == 1">
					<view class="flow-path uu-zjlc-top">
						<view class="path-block">
							<view class="flow-title">
								<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
								<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
								<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
								<view class="title-text">租赁流程</view>
							</view>
							
							<view class="flow-chart">
								<view class="item">
									<view class="pic">
										<image v-if="appType == 1" src="../../static/images/ic-flow11.png"></image>
										<image v-else-if="appType == 2" src="../../static/images/ic-flow111.png"></image>
										<image v-else src="../../static/images/ic-flow1.png"></image>
									</view>
									<view class="text">减免押金 订单审核</view>
								</view>
								<view class="dots">
									<view class="dot" v-for="item in 4"></view>
								</view>
								<view class="item">
									<view class="pic">
										<image v-if="appType == 1" src="../../static/images/ic-flow22.png"></image>
										<image v-else-if="appType == 2" src="../../static/images/ic-flow222.png"></image>
										<image v-else src="../../static/images/ic-flow2.png"></image>
									</view>
									<view class="text">选择商品 确认规格</view>
								</view>
								<view class="dots">
									<view class="dot" v-for="item in 4"></view>
								</view>
								<view class="item">
									<view class="pic">
										<image v-if="appType == 1" src="../../static/images/ic-flow33.png"></image>
										<image v-else-if="appType == 2" src="../../static/images/ic-flow333.png"></image>
										<image v-else src="../../static/images/ic-flow3.png"></image>
									</view>
									<view class="text">商家发货 用户收货</view>
								</view>
								<view class="dots">
									<view class="dot" v-for="item in 4"></view>
								</view>
								<view class="item">
									<view class="pic">
										<image v-if="appType == 1" src="../../static/images/ic-flow44.png"></image>
										<image v-else-if="appType == 2" src="../../static/images/ic-flow444.png"></image>
										<image v-else src="../../static/images/ic-flow4.png"></image>
									</view>
									<view class="text">租赁中 按期归还</view>
								</view>
							</view>
							
							<view class="section-box">
								<view class="count-header">
									<image src="../../static/images/icon/count.png" class="count-pic"></image>
									<view class="count-text">租期计算</view>
								</view>
								<view class="s-item" style="margin-top: 0;">
									<view class="content">租期是从用户签收日次日起计算（正常是快递到货次日，由于用户原因延误签收时间，延误时间计入租期内）。例如：用户您选择的租期是 3号到9号（计费时间为7天），但4号快递才送到货给您签收，则从5号开始起算租期，到期后可对应顺延2天在归还寄回（寄回快递费用户自费），寄回时间以快递显示的收揽时间为准。 </view>
								</view>	
								
								<image v-if="appType == 0" src="https://wap.yqjy8.vip/uploads/attach/2023/05/20230520/136da723308e57e2acec2938ed03021c.png" class="date-pic"></image>
								<image v-else-if="appType == 1" src="https://oss.jingyinmao.cn/attach/2023/07/f2309202307071359571178.png" class="date-pic"></image>
								<image v-else-if="appType == 2" src="https://oss.jingyinmao.cn/attach/2023/07/ca316202307261659098599.png" class="date-pic"></image>
							</view>
							<u-divider :dashed="true"></u-divider>
							
							<view id="past22">
								<view class="s-item">
									<view class="flow-title">
										<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
										<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
										<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
										<view class="title-text">关于审核</view>
									</view>
									<view class="content">下单成功后请您耐心等待，48小时内通过电话、短信、服务提醒等反馈审核结果。如果审核不通过，订单将自动关闭，具体审核结果会及时通知您，请保持手机畅通。</view>
								</view>
								<view class="s-item">
									<view class="flow-title">
										<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
										<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
										<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
										<view class="title-text">关于交租</view>
									</view>
									<view class="content">短租订单（90天或以下）：商家发货前会根据审核结果对用户的订单进行租金扣款（原则上支持商家一次性扣全款），若商家依据风险控制系统判定用户的风险系数较高时，商家可能需要用户预付多期租金，如用户不同意，商家可直接取消订单，并原路退还用户支付的租金（如有）。</view>
									<view class="content">长租订单（90天以上）：商家发货前会根据审核结果对用户的订单进行租金扣款（首期租金扣款），租期内按月扣去每期租金；若商家依据风险控制系统判定用户的风险系数较高时，商家可能需要用户预付多期租金，如用户不同意，商家可直接取消订单，并原路退还用户支付的租金（如有）。</view>
								</view>
								
								<view class="s-item">
									<view class="flow-title">
										<image v-if="appType == 1" src="../../static/images/icon/sanjiaoxing1.png" class="above-pic"></image>
										<image v-else-if="appType == 2" src="../../static/images/icon/sanjiaoxing2.png" class="above-pic"></image>
										<image v-else src="../../static/images/icon/sanjiaoxing.png" class="above-pic"></image>
										<view class="title-text">关于拒签</view>
									</view>
									<view class="content">起租日前到货的订单用户签收时，发现商品存在质量问题、商品与订单规格描述或商家约定的描述不一致可拒签快递，可联系商家客服申请换货或申请退款，并由商家承担往返运费；因用户自身原因拒签的，用户需自行承担往返运费；起租日后到货的订单用户签收时，用户可以拒签快递，由商家承担往返运费；
									</view>
									<view class="content"><text style="font-weight: bold;">温馨提醒：</text>若商品出现以下情形不支持拒签，用户需与商家协商处理：（1）全新商品被拆封或激活或其他行为影响商品二次出售的；（2）定制产品。</view>
								</view>
							</view>
							
							
						</view>
					</view>
				</view>
				
				<view v-if="selectIndex == 2">
					<view class="problem">
					<image v-if="appType == 0" class="top-problem" src="https://oss.jingyinmao.cn/attach/2023/07/4eb7a202307281819554624.png"></image>
					<image v-else-if="appType == 1" class="top-problem" src="https://oss.jingyinmao.cn/attach/2023/07/3b9fe202307281820124711.png"></image>
					<image v-else-if="appType == 2" class="top-problem" src="https://oss.jingyinmao.cn/attach/2023/07/1f2d1202307281820284260.png"></image>
						<view class="problem-list">
							<view class="problem-list-wrapper">
								<view class="problem-item">
									<view class="problem-title">
										<image class="ic-problem-left" src="../../static/images/ic-problem-left.png"></image>
										<view class="problem-subtitle">关于下单后商品发货时效的问题？</view>
									</view>
									<view class="problem-content">
										下单后商品发货时效标准如下:</br>
										(1) 若用户的订单是租赁时长的订单，商家将在用户成功交付首期租金后的48小时内发货;若用户成功交付首期租金后，商家无法提供租赁商品(如缺货、补货)，商家将在24小时内联系用户协商修改租期或延迟发货;</br>
										(2) 若用户的订单是自选租赁时长的订单 (含预选租期类型订单)，用户成功交付首期租金后，商家将在订单起租日前48小时左右发货，以保证商品在订单起租日前寄到用户收货地址处;若用户成功交付首期租金后，商家无法在订单起租日前提供租赁商品 (如缺货、补货)，则商家将在起租日前24小时内联系用户协商修改租期或延迟发货;</br>
										(3) 若用户的订单为 [自行到店取货]、[送货上门，类型订单，用户可自行和商家约定取货或送货时间。
									</view>
								</view>
								
								<view class="problem-item" v-if="isExpand">
									<view class="problem-title">
										<image class="ic-problem-left" src="../../static/images/ic-problem-left.png"></image>
										<view class="problem-subtitle">关于物流及运费问题？</view>
									</view>
									<view class="problem-content">
										Q1关于商品寄出运费的问题</br>
										商品寄出均为顺丰包邮。客户免运费。</br>
										Q2关于商品归还运费的问题</br>
										待收货订单:商品归还运费处理标准如下</br>
										(1) 若商品本身没有问题，且为自选租赁时长的单(含预选租期类型订单) 起租日前送到货或固定租赁时长订单正常送到货，但因用户自身原因拒收，默认由用户承担归还运费;</br>
										(2) 若商品本身有问题 (如质量问题) 或自选租赁时长的订单(含预选租期类型订单) 起租日后送到货，用户可以拒收，默认由商家承担归还运费。
									</view>
								</view>
								
								<view class="problem-item" v-if="isExpand">
									<view class="problem-title">
										<image class="ic-problem-left" src="../../static/images/ic-problem-left.png"></image>
										<view class="problem-subtitle">订单到期后商品如何归还？</view>
									</view>
									<view class="problem-content">
										平台订单到期，商品如为到期赠送，无需归还。</br>
										如选择是到期归还，请在订单详情，查看归还地址。选择收派员上门取件并在自行寄出快递后填写快递单号，实际完成归还。</br>
										温馨提示:建议用户在寄出或送还商品前，录制清晰的装箱视频，降低物流、验收损坏风险
									</view>
								</view>
								
								<view class="problem-item" v-if="isExpand">
									<view class="problem-title">
										<image class="ic-problem-left" src="../../static/images/ic-problem-left.png"></image>
										<view class="problem-subtitle">可以提前还款吗?需要赔付违约金吗?</view>
									</view>
									<view class="problem-content">
										可以提前还款，订单交易快照未明确约定【随租随还】的订单，用户提前归无需赔付违约金。如没有解决您的问题? 联系客服。
									</view>
								</view>
								
								
								<view class="problem-item" v-if="isExpand">
									<view class="problem-title">
										<image class="ic-problem-left" src="../../static/images/ic-problem-left.png"></image>
										<view class="problem-subtitle">关于租期计算问题</view>
									</view>
									<view class="problem-content">
										租期是从用户签收日次日起计算 (正常是按快递到货次日，由于用户原因延误签收时间，延误时间计入租期内)。例如: 用户您选择的租期是3号到9号(计费时间为 7天)，但4号快递才送到货给您签收，则从5号起算租期，到期后可相应顺延2天再归还寄回(即11号寄回设备)，寄回时间以快递显示的揽收时间为准。
									</view>
								</view>
								
								<view class="problem-item" v-if="isExpand">
									<view class="problem-title">
										<image class="ic-problem-left" src="../../static/images/ic-problem-left.png"></image>
										<view class="problem-subtitle">怎么开发票？</view>
									</view>
									<view class="problem-content">
										下单时，用户可在[确认订单页，底部的 [备注栏，下正确填写填写开票详细资料和类型。商家发货前会与用户联系，届时用户可咨询商家，订单是否支持开发票、开发票税点由哪方承担、开票的税点是多少等其他发票问题。
									</view>
								</view>
								
								<view class="expand-wrapper" @click="expand">
									<view class="expand-wrapper">
										<view>{{expandTitle}}</view>
										<image v-if="!isExpand" class="ic-expand" src="../../static/images/ic-expand.png"></image>
									</view>
								</view>
								
							</view>
							
						</view>
								
					</view>
				</view>
			</view>	
		
			<view class="tip-list">
				<view class="tip-title">
					温馨提示
				</view>
				<view class="tip-txt">
					<text><text class="point"></text>点击“免押租”按钮后即默认您已阅读和接受上述产品页面信息，且同意授权平台将您的个人信息用户租赁交易的风险评估。</text>
				</view>
				<view class="tip-txt">
					<text><text class="point"></text>严正声明：直租侠平台一直以来禁止18周岁以下用户下单严正声明：直租侠平台一直以来禁止18周岁以下用户下单</text>
				</view>
				<view class="tip-txt">
					<text><text class="point"></text>为保障您的租赁服务体验，若商家出现缺货、无法发货等情况，平台将自动为您的订单匹配新的商家，订单所属店铺可能发生变化，若您对此介意，请慎拍！感谢您的支持与理解！</text>
				</view>
				<view class="tip-txt">
					<text><text class="point"></text>本商品生成的订单过程将通过区块链存证到司法链，恶意逾期违约将追究法律责任，违约方承担所产生的案件受理费，诉讼保全费、公告费，律师费以及违约金！</text>
				</view>
				<view class="tip-txt">
					<text><text class="point"></text>未经出租人同意，承租人私自转卖租赁物设备，系违法行为，涉嫌诈骗！</text>
				</view>
				<view class="tip-txt">
					<text><text class="point"></text>上述商品详情包含的所有图片仅供参考，具体情况以实物为准。</text>
				</view>
			</view>
			
		</view>
		
		<view style="height: 200rpx;"></view>
	</view>
</template>

<script>
	let app = getApp();
	import { getOrderDetail } from '@/api/order.js'
	import productSSwiper from '@/components/productSSwiper';
	export default {
		components: {
			productSSwiper
		},
		data() {
			return {
				appType: app.globalData.appType,
				order_id: '',
				orderInfo: null,
				selectIndex: 0,
				headerShow: false,
				spuInfoTop: 20,
				description: '',
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
		
			this.getOrderInfo()
			
			const query = uni.createSelectorQuery();
			setTimeout(() => {
				this.$nextTick(() => {
					query.select('#past1')
					.boundingClientRect(data => {
						this.spuInfoTop = data.top;
					})
					.exec();
				})
			}, 500);
		},
		methods: {
			goRentList() {
				uni.setStorageSync('billOrder', this.orderInfo);
				uni.navigateTo({
					url: `/pages/lease/sku-rent-list`
				})
			},
			expand() {
				if (this.isExpand) {
					this.expandTitle = '展开查看更多'
					this.isExpand = false
				} else {
					this.expandTitle = '收起'
					this.isExpand = true
				}
			},
			onPageScroll(res) {
				var that = this,
					scrollY = res.scrollTop;
				if (scrollY < this.spuInfoTop) {
					
					if (this.headerShow) {
						this.headerShow = false
					}
					
					
				} else {
					
					if (!this.headerShow) {
						this.headerShow = true
					}
				}
			},
			selectTab(index) {
				this.selectIndex = index
				if (index == 0) {
					uni.pageScrollTo({
						scrollTop: this.spuInfoTop,
						duration: 0
					})
					
				} else if (index == 1) {
					
					uni.pageScrollTo({
						scrollTop: this.spuInfoTop,
						duration: 0
					})
				} else if (index == 2) {
					uni.pageScrollTo({
						scrollTop: this.spuInfoTop,
						duration: 0
					})
				}
				
			},
			getOrderInfo() {
				let that = this;
				uni.showLoading({
					title: "正在加载中"
				});
				let obj = getOrderDetail(this.order_id)
				obj.then(res => {
					that.$set(that, 'orderInfo', res.data);
					that.$set(that, 'description', res.data.cartInfo[0].productInfo.description);
					that.description = that.description.replace(
						/<img/gi,
						'<img style="max-width:100%;height:auto;float:left;display:block" ');
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.introduce {
		margin-top: 24rpx;
		font-size: 28rpx;
	}
	
	.spu-wapper {
		margin: 20rpx 20rpx 0 20rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}
	
	.sku-wrapper {
		margin: 20rpx 20rpx 0 20rpx;
		padding: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		
		.item {
			display: flex;
			margin-top: 24rpx;
			align-items: center;
			justify-content: space-between;
			
			.left {
				color: #666;
			}
			
			.right {
				color: #1f1f1f;
				text-align: right;
			}
		}
	}
	
	
	.anxinzu-wrapper {
		margin: 20rpx 20rpx 0 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding-bottom: 30rpx;
		position: relative;
		
		.anxinzu-img {
			width: 100%;
			height: 160rpx;
		}
		
		.list {
			width: 100%;
			display: flex;
			flex-direction: row;
			.item {
				width: 25%;
				flex: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.img {
					width: 88rpx;
					height: 88rpx;
					background: #D8D8D8;
					border: 1px solid #979797;
				    border-radius: 44rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.content {
					margin-top: 16rpx;
					font-size: 24rpx;
				}
			}
		}
		
		.anxinzu-text {
			position: absolute;
			left: 24rpx;
			top: 100rpx;
			font-size: 24rpx;
			color: #999999;
		}
		
		.label-icon {
			position: absolute;
			width: 128rpx;
			height: 148rpx;
			right: 20rpx;
			top: -8rpx;
		}
	}
	
	
	.labelNew{
		// width: 104rpx;
		// height: 64rpx;
		font-size: 20rpx;
		color: #fff;
		font-weight: 500;
		// border:1px solid var(--view-theme);
		border-radius: 20rpx;
		padding: 4rpx 8rpx;
		margin-right: 10rpx;
		display: inline-block;
		vertical-align: 5rpx;
		background: linear-gradient(180deg, #FF9D5C 0%, #FF7847 100%);
	}
	
	
	.spu-label {
		margin: 20rpx 20rpx 0 20rpx;
		.label-item {
			// width: 104rpx;
			// height: 64rpx;
			font-size: 20rpx;
			color: #FF9147;
			font-weight: 500;
			// border:1px solid var(--view-theme);
			border-radius: 4rpx;
			padding: 4rpx 8rpx;
			margin-right: 10rpx;
			display: inline-block;
			vertical-align: 5rpx;
			background: rgba(255,145,71,0.08);
		}
	}
	
	
	.rent-wrapper {
		margin-top: 24rpx;
		// padding: 0 20rpx;
		
		.left {
			display: flex;
			align-items: center;
		}
		
		.rent-label {
			background: rgba(41,126,255,0.08);
			color: #297EFF;
			border-radius: 4rpx;
			padding: 4rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.zhima-icon {
				width: 22rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
		
		.spu-rent {
			color: #999999;
			margin-left: 8rpx;
			.price {
				text-decoration: line-through;
			}
		}
	}
	
	
	.zhima-credit {
		// padding-top: 26rpx;
		
		.content {
			padding: 12rpx 24rpx;
			background: #f5f7fa;
			border-radius: 24rpx;
			font-size: 24rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.zhima-icon {
				width: 22rpx;
				height: 24rpx;
			}
			
			.left-title {
				color: #297EFF;
				margin-left: 8rpx;
				margin-right: 4rpx;
			}
		}
	}
	
	.snapshap-tip {
		padding: 24rpx;
		margin-top: 24rpx;
		background-color: #fff9f6;
		color: #f37031;
	}
	
	.title-selsct-wrapper {
		padding: 0 20rpx;
	}
	
	
	.title-wrapper {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		height: 96rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		
		.detail-title {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 96rpx;
			position: relative;
			
			.content {
				height: 96rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 4rpx solid #fff;
			}
			
			// .h-line {
			// 	position: absolute;
			// 	bottom: 0;
			// 	width: 80rpx;
			// 	height: 4rpx;
			// 	background: #fff;
			// }
			
			.on {
				border-bottom: 4rpx solid #39CCC2;
			}
		}
		
		.on {
			color: #1F1F1F;
			font-weight: bold;
		}
	}
	
	
	.top-header {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 8;
		border-radius: 0;
		background-color: #fff;
		overflow: hidden;
	}
	
	.conter {
		display: block;
		width: 100%;
		padding-bottom: 24rpx;
		background-color: #fff;
		border-bottom-left-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		
		.s-item {
			padding: 0 20rpx;
			margin-top: 48rpx;
			
			
			.flow-title {
				// display: flex;
				position: relative;
				margin-bottom: 24rpx;
				
				.above-pic {
					position: absolute;
					left: 0;
					top: 0;
					width: 88rpx !important;
					height: 33rpx;
				}
				
				.title-text {
					position: relative;
					padding-left: 28rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 33rpx;
					// background: linear-gradient(90deg, #E8F9F7 0%, rgba(57,204,194,0) 100%);
				}
			}
			
			.content {
				background-color: #F5F7FA;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
				padding: 20rpx;
				border-radius: 8rpx;
				
				&~.content {
					margin-top: 16rpx;
				}
			}
		}
		
	}
	
	.conter img {
		display: block;
	}
	
	.flow-path {
			background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230520/a91e10d0623bb8caba5013988172fe93.png');
			background-size: 100%;
			background-color: #FFFFFF;
			background-repeat: no-repeat;
			padding-top: 168rpx;
			padding-bottom: 100rpx;
			
			
			.path-block {
				margin: 0 24rpx;
				padding: 32rpx 24rpx 0 24rpx;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				background-color: #fff;
				
				.flow-title {
					// display: flex;
					position: relative;
					margin-bottom: 24rpx;
					
					.above-pic {
						position: absolute;
						left: 0;
						top: 0;
						width: 88rpx !important;
						height: 33rpx;
					}
					
					.title-text {
						position: relative;
						padding-left: 28rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #1F1F1F;
						line-height: 33rpx;
						// background: linear-gradient(90deg, #E8F9F7 0%, rgba(57,204,194,0) 100%);
					}
				}
					
				.flow-chart {
					display: flex;
					justify-content: space-between;
					
					.item{
						width: 110rpx;
						text-align: center;
						
						
						.pic{
							width: 80rpx;
							height: 80rpx;
							margin: 0 auto;
							
							image {
								width: 100%;
								height: 100%;
							}
						}
						
						.text {
							margin-top: 8rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #666666;
							line-height: 32rpx;
						}
					}
					
					.dots {
						display: flex;
						justify-content: space-between;
						width: 40rpx;
						margin-top: 40rpx;
						
						.dot {
							width: 4rpx;
							height: 4rpx;
							background: #D8D8D8;
							border-radius: 50%;
						}
					}
					
				}
				
				.section-box {
					margin-top: 24rpx;
					margin-bottom: 48rpx;
					padding: 24rpx;
					background: #F5F7FA;
					border-radius: 8rpx;
					
					.count-header {
						display: flex;
						align-items: center;
						
						.count-pic {
							width: 26rpx;
							height: 28rpx;
							margin-right: 8rpx;
						}
						
						.count-text {
							font-size: 28rpx;
							font-weight: bold;
							color: #1F1F1F;
							line-height: 28rpx;
						}
						
					}
					
					.content {
						padding: 16rpx 0 24rpx 0;
					}
					
					.date-pic {
						width: 556rpx;
						height: 258rpx;
					}
				}
			}
			
			.s-item {
				margin-top: 48rpx;
				
				.content {
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					line-height: 44rpx;
					
					&~.content {
						margin-top: 16rpx;
					}
				}
			}
			
		}
	
	
	.tip-list {
		background-color: #fff;
		padding: 20rpx;
		width: 710rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		
		.tip-title {
			font-weight: bold;
			margin-top: 24rpx;
		}
		
		.tip-txt {
			color: #999;
			font-size: 24rpx;
			margin-top: 24rpx;
			display: flex;
			line-height: 40rpx;
			
			.point {
				width: 8rpx;
				height: 8rpx;
				background-color: #F53831;
				border-radius: 50%;
				display: inline-block;
				margin-right: 8rpx;
				margin-bottom: 4rpx;
			}
		}
		
	}
	
	.problem {
		width: 100%;
		position: relative;
		.top-problem {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 320rpx;
		}
		
		.problem-list {
			position: relative;
			padding-top: 160rpx;
			.problem-list-wrapper {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 24rpx;
				.problem-item {
					padding: 24rpx;
					background: #F5F7FA;
					border-radius: 16rpx;
					margin-bottom: 24rpx;
				}
				
				.problem-title {
					display: flex;
					flex-direction: row;
					align-items: center;
					
					.ic-problem-left {
						width: 44rpx;
						height: 44rpx;
					}
					
					.problem-subtitle {
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #1F1F1F;
						font-weight: bold;
					}
				}
				
				.problem-content {
					margin-top: 16rpx;
					color: #999;
					font-size: 24rpx;
					line-height: 40rpx;
				}
			}
		}
	
		.expand-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 24rpx;
			
			.ic-expand {
				margin-left: 4rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
	
	.product-intro {
		margin: 0 20rpx;
	}
</style>